<template>
  <div class="box">
    <!-- el-row:行
         el-col:列
        span:表示跨度 ，修饰元素占一行的比例   满级24  ，按比例分配
        gutter:分栏间隔

    -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card bg-green grid-content">
          <div slot="header" class="clearfix flex j-c a-c">
            <span>用户总数</span>
          </div>
          <div class="text item flex j-c a-c">12345</div>
        </el-card></el-col
      >
      <el-col :span="6">
        <el-card class="box-card bg-pink grid-content">
          <div slot="header" class="clearfix flex j-c a-c">
            <span>问题总数</span>
          </div>
          <div class="text item flex j-c a-c">12345</div>
        </el-card></el-col
      >
      
      <el-col :span="6">
        <el-card class="box-card bg-blue grid-content">
          <div slot="header" class="clearfix flex j-c a-c">
            <span>文档总数</span>
          </div>
          <div class="text item flex j-c a-c">12345</div>
        </el-card></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <!-- echarts图表区域 -->
      <el-col :span="18"> <div class="myKbCharts"></div> </el-col>
      <!-- 用户信息区域 -->
      <el-col :span="6">
        <el-card class="box-card grid-content">
          <div slot="header" class="clearfix flex j-c a-c">
            <span>推荐文档</span>
          </div>
          <div class="text item flex j-c a-c">2</div>
        </el-card>
        <hr style="margin: 20px 0px; border: 2px solid aqua" />
        <el-card class="box-card grid-content">
          <div slot="header" class="clearfix flex j-c a-c">
            <span>用户信息</span>
          </div>
          <div class="text item flex j-c a-c">6</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
//引入口碑接口
import request from "@/api/koubei.js";
export default {
  data() {
    return {
      //状态值接口碑类型数组
      types: [],
      //用来保存口碑各个类型对应的数量,要求：需要和types里面的类型对应起来  []
      typecount: [],
    };
  },
  methods: {
    //自定义方法，创建echarts相关的配置
    //异步方法，里面可以使用await接
    async showKbEcharts() {
      //获取服务器响应数据
      let { data: kbtypes } = await request.getkbSource();
      // console.log(kbtypes);
      this.types = kbtypes.map((r) => {
        return r.kbtypename;
      });

      //发起请求从服务器拿到各个口碑数量数组
      let { data: kbtypecounts } = await request.getkbcount();
      console.log(this.types);
      console.log(kbtypecounts);
      //kbtypecounts是
      /*[
          {
              "id": null,
              "kbtypename": "网络",
              "count": 48
          },
          {
              "id": null,
              "kbtypename": "学生",
              "count": 18
          },
    {*/
      // 而我们想让它称为[48,18,26,...]这样的数组，还要满足和口碑类型kbtypes数组对应起来
      this.typecount = kbtypecounts.map((r) => {
        //判断r.kbtypenam == this.types[？]  返回对应的r.count
        for (let i = 0; i < this.types.length; i++) {
          if (r.kbtypename == this.types[i]) {
            return r.count;
          }
        }
      });
      //获取echarts对象，初始化--提供一个容器显示图表
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".myKbCharts"));

      //配置echart相关选项
      let option = {
        title: {
          text: "问题类型分布图",
          subtext: "企鹅管理系统",
          textStyle: { color: "blue", fontSize: "20" },
          subtextStyle: {
            color: "#ff0000",
          },
        },
        legend: {},
        gird: {
          show: true,
          // backgroundColor: "#000",
          borderColor: "#0000ff",
          borderWidth: 2,
        },
        tooltip: {},
        xAxis: {
          //水平位置标签数据 数组
          data: this.types,
        },
        toolbox: {
          feature: {
            dataZoom: { show: true },
            dataView: { show: true, title: "数据视图" },
            saveAsImage: { type: "png", show: true },
          },
        },
        yAxis: {},
        series: [
          {
            name: "簇状",
            type: "bar",
            data: this.typecount,
          },
          {
            name: "折线",
            type: "line",
            data: this.typecount,
          },
        ],
        color: [
          "#15F615",
          "#F615D5",
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        backgroundColor: "#F5F480",
      };
      //设置当前echart实例
      myChart.setOption(option);
    },
  },
  //创建数据完成
  created() {},
  //渲染dom完成
  mounted() {
    this.showKbEcharts();
  },
};
</script>

<style scoped lang="scss">
// echart样式
.myKbCharts {
  width: 100%;
  height: 500px;
  border: 1px solid red;
}
// card内容的样式

.box-card {
  .clearfix {
    span {
      font-size: 20px;
      font-weight: bold;
      color: rgb(76, 15, 15);
    }
  }

  .text {
    font-size: 20px;
    font-weight: bold;
    color: rgb(76, 15, 15);
  }

  .item {
    margin-bottom: 18px;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: greenyellow;
}
.bg-yellow {
  background: yellow;
}

.bg-pink {
  background: pink;
}
.bg-orange {
  background: orangered;
}

.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
